import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// vuex缺点。一刷新页面，就会清空数据，如果想长期保存这个数据，
// 可以借助本地存储或者后台接口

// 数据状态管理器
export default new Vuex.Store({
  // 数据仓库
  state: {
    token: localStorage.getItem('token') || '',
    cartList: JSON.parse(localStorage.getItem('toCart')) || [], // 购物车数据
  },
  // 处理同步逻辑提交的地方
  mutations: {
    // 登陆页面
    SET_TOKEN(state, data) {
      localStorage.setItem('token', data)
      console.log('data:vuex', data)
      state.token = data
    },
    // home页面
    TO_CART(state, item) {
      // 购物车不能重复添加，只能数量变化
      const goods = state.cartList.find((v) => v.id === item.id)
      if (goods) {
        goods.count++
      } else {
        item.count = 1
        state.cartList.push(item)
      }
      localStorage.setItem('toCart', JSON.stringify(state.cartList))
    },
    // 购物车页面
    ADD_CART_ITEM(state, item) {
      item.count++
    },
    REDUCE_CART_ITEM(state, item) {
      if (item.count <= 1) {
        if (window.confirm('确定删除吗')) {
          state.cartList.splice(
            state.cartList.findIndex((v) => v.id === item.id),
            1
          )
          localStorage.setItem('toCart', JSON.stringify(state.cartList))
        }
        return
      }
      item.count--
    },
  },
  // 处理异步逻辑的地方，最终要将结果-提交给mutaion
  actions: {},
  // 计算属性
  getters: {
    totalPrice(state) {
      return state.cartList.reduce((num, item) => {
        return num + item.count * item.price
      }, 0)
    },
  },
  // 模块化
  modules: {},
})
